<template>
    <div>
        <div></div>
        <div style="margin-bottom: 10px;">
            <span style="margin-right:5px;">设备</span>
            <ClientSelect v-model="log_data.client_id" style="width: 200px;margin-right:15px;"></ClientSelect>
            <span style="margin-right:5px;">记录时间</span>
            <Input v-model="log_data.log_time" placeholder="记录时间" style="width: 200px;margin-right:15px;"></Input>
            <span style="margin-right:5px;">搜索内容</span>
            <Input v-model="log_data.search" placeholder="搜索内容" style="width: 200px;margin-right:15px;"></Input>
            <Button type="primary" @click="handleLogsSearch" style="margin-right: 15px;">搜索</Button>
            <Button @click="handleClearLogsSearch" style="margin-right: 15px;">重置</Button>
        </div>
        <div style="padding: 10px;border:1px solid #dcdee2;border-radius: 4px;border-bottom:0;">
            <Select v-model="log_data.log_db_index" size="small" style="width:200px;margin-right:15px;">
                <Option :value="0">当前数据库</Option>
                <Option v-for="(item, index) in log_data.archive_dbs" :value="index+1" :key="index+1">{{ item }}</Option>
            </Select>
            <ClientLogArchiveButton @success="handleClientLogArchiveSuccess" style="margin-right: 15px;float:right;"></ClientLogArchiveButton>
            <Button type="waring" size="small" @click="handleExportLogs" style="margin-right: 15px;float:right;">导出</Button>
        </div>
        <Table border :columns="log_data.columns" :data="log_data.data" stripe>
            <template #client_id="{ row }">
                <ClientTableCellValue :client_id="row.client_id"></ClientTableCellValue>
            </template>
        </Table>
        <Page :total="log_data.page_total" size="small" show-elevator show-sizer show-total style="margin-top: 10px;" @on-change="handleLogPageChange" @on-page-size-change="handleLogPageSizeChange" />
    </div>
</template>

<script>
import ClientSelect from './ClientSelect.vue';
import ClientTableCellValue from './ClientTableCellValue.vue';
import ClientLogArchiveButton from './ClientLogArchiveButton.vue';

export default {
    name: 'ClientLogsView',
    components: {
        ClientSelect,
        ClientTableCellValue,
        ClientLogArchiveButton

    },
    data() {
        return {
            log_data: {
                log_db_index: 0,
                archive_dbs: [],
                client_id: '',
                log_time: '',
                search: '',
                columns: [
                    { title: 'ID', key: 'log_id', width: 100, align: 'center' },
                    { title: '记录时间', key: 'log_time', width: 200, align: 'center' },
                    { title: '设备ID', slot: 'client_id', width: 200, align: 'center' },
                    { title: '内容', key: 'log_content' }
                ],
                page_total: 40,
                page_size: 10,
                page_current: 1,
                data: []
            },
        }
    },
    methods: {
        handleLogsSearch() {
            this.log_data.page_current = 1;
            this.handleGetLogs();
        },
        handleClearLogsSearch() {
            this.log_data.search = '';
            this.log_data.log_time = '';
            this.log_data.client_id = '';
            this.log_data.page_current = 1;
            this.handleGetLogs();
        },
        handleLogPageChange(page_current) {
            this.log_data.page_current = page_current;
            this.handleGetLogs();
        },
        handleLogPageSizeChange(page_size) {
            this.log_data.page_size = page_size;
            this.log_data.page_current = 1;
            this.handleGetLogs();
        },
        handleClientLogArchiveSuccess() {
            this.handleGetLogs();
            this.handleGetArchiveDBs();
        },
        handleExportLogs() {
            var url = '/export_logs?page_size=' + this.log_data.page_size + '&page_current=' + this.log_data.page_current;
            if (this.log_data.log_db_index) {
                url += '&log_db_index=' + encodeURIComponent(this.log_data.log_db_index);
            }
            if (this.log_data.client_id) {
                url += '&client_id=' + encodeURIComponent(this.log_data.client_id);
            }
            if (this.log_data.log_time) {
                url += '&log_time=' + encodeURIComponent(this.log_data.log_time);
            }
            if (this.log_data.search) {
                url += '&search=' + encodeURIComponent(this.log_data.search);
            }
            this.$http.get(url).then(res => {
                if (res.status == 'ok') {
                    this.$http.downloadFile(res.data);
                } else {
                    this.errorMessage(res.data);
                }
            });
        },
        handleGetArchiveDBs() {
            this.$http.get('/get_archive_dbs').then((res) => {
                this.log_data.archive_dbs = res.data;
            })
        },
        handleGetLogs() {
            var url = '/get_logs?page_size=' + this.log_data.page_size + '&page_current=' + this.log_data.page_current;
            if (this.log_data.log_db_index) {
                url += '&log_db_index=' + encodeURIComponent(this.log_data.log_db_index);
            }
            if (this.log_data.client_id) {
                url += '&client_id=' + encodeURIComponent(this.log_data.client_id);
            }
            if (this.log_data.log_time) {
                url += '&log_time=' + encodeURIComponent(this.log_data.log_time);
            }
            if (this.log_data.search) {
                url += '&search=' + encodeURIComponent(this.log_data.search);
            }
            this.$http.get(url).then(res => {
                this.log_data.page_total = res.page_total;
                this.log_data.data = res.data;
            });
        },

    },
    created() {
        this.handleGetLogs();
        this.handleGetArchiveDBs();
    }
}
</script>